import React, { useState } from "react";
import {
  FiImage,
  FiFilter,
  FiSmile,
  FiType,
  FiPlus,
  FiTrash2,
  FiEdit2,
} from "react-icons/fi";

const ControlsPanel = ({
  onImageUpload,
  onUseTemplate,
  font,
  onFontChange,
  color,
  onColorChange,
  size,
  onSizeChange,
  onFilterChange,
  onAddSticker,
  onTextStyleChange,
  onTextAnimationChange,
  textElements,
  selectedText,
  onTextContentChange,
  onAddText,
  onDeleteText,
  onSelectText,
}) => {
  const filters = [
    { name: "无", value: "none" },
    { name: "黑白", value: "grayscale(100%)" },
    { name: "复古", value: "sepia(100%)" },
    { name: "反色", value: "invert(100%)" },
  ];
  const stickers = ["😂", "😭", "🤣", "😍", "😎", "🤔", "🙄", "😡"];

  // 可用的字体选项
  const fontOptions = [
    { value: "Arial", label: "Arial" },
    { value: "Impact", label: "Impact" },
    { value: "Comic Sans MS", label: "Comic Sans" },
    { value: "Times New Roman", label: "Times New Roman" },
    { value: "Courier New", label: "Courier New" },
    { value: "Verdana", label: "Verdana" },
    { value: "Georgia", label: "Georgia" },
    { value: "Palatino", label: "Palatino" },
    { value: "Garamond", label: "Garamond" },
    { value: "Bookman", label: "Bookman" },
    { value: "Helvetica", label: "Helvetica" },
    { value: "微软雅黑", label: "微软雅黑" },
    { value: "宋体", label: "宋体" },
    { value: "黑体", label: "黑体" },
    { value: "楷体", label: "楷体" },
  ];

  // 可用的文字动画效果
  const textAnimationOptions = [
    { value: "bounce", label: "弹跳效果" },
    { value: "wave", label: "波浪效果" },
    { value: "shake", label: "抖动效果" },
    { value: "zoom", label: "缩放效果" },
    { value: "rotate", label: "旋转效果" },
    { value: "fade", label: "淡入淡出" },
  ];

  const [controlsCollapsed, setControlsCollapsed] = useState(false);

  // 切换控制面板折叠状态
  const toggleControlsCollapse = () => {
    setControlsCollapsed(!controlsCollapsed);
  };

  // 处理添加文字按钮点击
  const handleAddText = () => {
    // 不传坐标，让App.js负责计算位置
    onAddText();
  };

  // 渲染文字列表
  const renderTextList = () => {
    if (!textElements || textElements.length === 0) {
      return (
        <div className="text-no-selection">
          暂无文字，请点击"添加文字"按钮添加
        </div>
      );
    }

    return (
      <div className="text-list">
        {textElements.map((textElem) => (
          <div
            key={textElem.id}
            className={`text-item ${
              selectedText && selectedText.id === textElem.id ? "active" : ""
            }`}
            onClick={() => onSelectText(textElem.id)}
          >
            <div className="text-item-content">
              <FiEdit2 />
              <span
                className="text-item-preview"
                style={{
                  color: textElem.style.color,
                  fontFamily: textElem.style.font,
                  fontWeight: textElem.style.bold ? "bold" : "normal",
                  fontStyle: textElem.style.italic ? "italic" : "normal",
                  textShadow: textElem.style.shadow
                    ? `${textElem.style.shadowOffsetX}px ${textElem.style.shadowOffsetY}px ${textElem.style.shadowBlur}px ${textElem.style.shadowColor}`
                    : "none",
                }}
              >
                {textElem.text.length > 15
                  ? textElem.text.substring(0, 15) + "..."
                  : textElem.text}
              </span>
            </div>
            <button
              className="text-delete-btn"
              onClick={(e) => {
                e.stopPropagation();
                onDeleteText(textElem.id);
              }}
            >
              <FiTrash2 />
            </button>
          </div>
        ))}
      </div>
    );
  };

  return (
    <div className="controls-panel">
      <div className="control-section">
        <h3>
          <FiImage /> 图片设置
        </h3>
        <div className="control-group">
          <input
            type="file"
            id="imageUpload"
            accept="image/*"
            onChange={onImageUpload}
            className="file-input"
          />
          <label htmlFor="imageUpload" className="file-label">
            上传图片
          </label>
          <button onClick={onUseTemplate} className="template-btn">
            使用模板
          </button>
        </div>
      </div>

      <div className="control-section">
        <h3>
          <FiType /> 文字设置
        </h3>

        {/* 添加文字按钮 */}
        <div className="add-text-button-container">
          <button className="add-text-btn" onClick={handleAddText}>
            <FiPlus /> 添加文字
          </button>
        </div>

        {/* 文字列表 */}
        <div className="text-list-container">
          <h4>文字列表</h4>
          {renderTextList()}
        </div>

        {/* 文字样式设置 */}
        <div
          className={`text-style-controls ${
            controlsCollapsed ? "collapsed" : ""
          }`}
        >
          <h3 onClick={toggleControlsCollapse}>
            {selectedText
              ? `"${selectedText.text.substring(0, 10)}${
                  selectedText.text.length > 10 ? "..." : ""
                }" 样式设置`
              : "文字样式"}
          </h3>

          {/* 文字内容输入控件 - 只在有选中文字时显示 */}
          {selectedText && (
            <div className="control-row text-input-row">
              <input
                type="text"
                placeholder="文字内容"
                value={selectedText.text}
                onChange={(e) =>
                  onTextContentChange(selectedText.id, e.target.value)
                }
                className="text-input"
              />
            </div>
          )}

          {!selectedText && (
            <div className="text-no-selection">
              请从文字列表中选择一个文字进行编辑
            </div>
          )}

          {selectedText && (
            <>
              <div className="text-style-separator">样式设置</div>

              <div className="control-row">
                <label>字体：</label>
                <select
                  value={selectedText.style.font}
                  onChange={(e) => onTextStyleChange("font", e.target.value)}
                  className="style-select"
                >
                  {fontOptions.map((font) => (
                    <option key={font.value} value={font.value}>
                      {font.label}
                    </option>
                  ))}
                </select>
              </div>

              <div className="control-row">
                <label>动画效果：</label>
                <select
                  value={selectedText.style.animation || "bounce"}
                  onChange={(e) =>
                    onTextAnimationChange(selectedText.id, e.target.value)
                  }
                  className="style-select"
                >
                  {textAnimationOptions.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>

              <div className="control-row">
                <label>大小：</label>
                <input
                  type="range"
                  min="12"
                  max="72"
                  value={selectedText.style.size}
                  onChange={(e) =>
                    onTextStyleChange("size", parseInt(e.target.value))
                  }
                  className="range-slider"
                />
                <span>{selectedText.style.size}px</span>
              </div>

              <div className="control-row">
                <label>颜色：</label>
                <input
                  type="color"
                  value={selectedText.style.color}
                  onChange={(e) => onTextStyleChange("color", e.target.value)}
                  className="color-picker"
                />
              </div>

              <div className="control-row">
                <label>边框颜色：</label>
                <input
                  type="color"
                  value={selectedText.style.strokeColor}
                  onChange={(e) =>
                    onTextStyleChange("strokeColor", e.target.value)
                  }
                  className="color-picker"
                />
              </div>

              <div className="control-row">
                <label>边框宽度：</label>
                <input
                  type="range"
                  min="0"
                  max="10"
                  value={selectedText.style.strokeWidth}
                  onChange={(e) =>
                    onTextStyleChange("strokeWidth", parseInt(e.target.value))
                  }
                  className="range-slider"
                />
                <span>{selectedText.style.strokeWidth}px</span>
              </div>

              <div className="control-row">
                <label>对齐方式：</label>
                <div className="align-buttons">
                  <button
                    className={`align-button ${
                      selectedText.style.align === "left" ? "active" : ""
                    }`}
                    onClick={() => onTextStyleChange("align", "left")}
                  >
                    左对齐
                  </button>
                  <button
                    className={`align-button ${
                      selectedText.style.align === "center" ? "active" : ""
                    }`}
                    onClick={() => onTextStyleChange("align", "center")}
                  >
                    居中
                  </button>
                  <button
                    className={`align-button ${
                      selectedText.style.align === "right" ? "active" : ""
                    }`}
                    onClick={() => onTextStyleChange("align", "right")}
                  >
                    右对齐
                  </button>
                </div>
              </div>

              <div className="control-row checkbox-controls">
                <label>
                  <input
                    type="checkbox"
                    checked={selectedText.style.bold}
                    onChange={(e) =>
                      onTextStyleChange("bold", e.target.checked)
                    }
                  />
                  粗体
                </label>

                <label>
                  <input
                    type="checkbox"
                    checked={selectedText.style.italic}
                    onChange={(e) =>
                      onTextStyleChange("italic", e.target.checked)
                    }
                  />
                  斜体
                </label>

                <label>
                  <input
                    type="checkbox"
                    checked={selectedText.style.shadow}
                    onChange={(e) =>
                      onTextStyleChange("shadow", e.target.checked)
                    }
                  />
                  阴影
                </label>
              </div>

              {selectedText.style.shadow && (
                <div className="shadow-controls">
                  <div className="control-row">
                    <label>阴影颜色：</label>
                    <input
                      type="color"
                      value={selectedText.style.shadowColor}
                      onChange={(e) =>
                        onTextStyleChange("shadowColor", e.target.value)
                      }
                      className="color-picker"
                    />
                  </div>

                  <div className="control-row">
                    <label>阴影模糊：</label>
                    <input
                      type="range"
                      min="0"
                      max="20"
                      value={selectedText.style.shadowBlur}
                      onChange={(e) =>
                        onTextStyleChange(
                          "shadowBlur",
                          parseInt(e.target.value)
                        )
                      }
                      className="range-slider"
                    />
                    <span>{selectedText.style.shadowBlur}px</span>
                  </div>

                  <div className="control-row">
                    <label>阴影X偏移：</label>
                    <input
                      type="range"
                      min="-10"
                      max="10"
                      value={selectedText.style.shadowOffsetX}
                      onChange={(e) =>
                        onTextStyleChange(
                          "shadowOffsetX",
                          parseInt(e.target.value)
                        )
                      }
                      className="range-slider"
                    />
                    <span>{selectedText.style.shadowOffsetX}px</span>
                  </div>

                  <div className="control-row">
                    <label>阴影Y偏移：</label>
                    <input
                      type="range"
                      min="-10"
                      max="10"
                      value={selectedText.style.shadowOffsetY}
                      onChange={(e) =>
                        onTextStyleChange(
                          "shadowOffsetY",
                          parseInt(e.target.value)
                        )
                      }
                      className="range-slider"
                    />
                    <span>{selectedText.style.shadowOffsetY}px</span>
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      </div>

      <div className="control-section">
        <h3>
          <FiFilter /> 滤镜效果
        </h3>
        <div className="filter-buttons">
          {filters.map((filter) => (
            <button
              key={filter.value}
              onClick={() => onFilterChange(filter.value)}
              className={`filter-btn ${font === filter.value ? "active" : ""}`}
            >
              {filter.name}
            </button>
          ))}
        </div>
      </div>

      <div className="control-section">
        <h3>
          <FiSmile /> 添加贴图
        </h3>
        <div className="sticker-buttons">
          {stickers.map((sticker) => (
            <button
              key={sticker}
              onClick={() => onAddSticker(sticker)}
              className="sticker-btn"
            >
              {sticker}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ControlsPanel;
